<template>
	<div class="goods-list">
		<!--<router-link class="goods-item" v-for='item in goodslist' :key='item.id' :to="'/home/goodsinfo/'+item.id" tag='div'>
			<img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" />
			<h1 class='title'>{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">{{item.sell_price}}</span>
					<span class="old">{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</router-link>
		-->
		<!--
			在网页中，有两种跳转方式
			方式1.使用a标签的形式叫做标签跳转
			方式2.使用window.location.href 的形式，叫做编程式导航
		-->
		<div class="goods-item" v-for='item in goodslist' :key='item.id' @click='goDetail(item.id)'>
			<img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" />
			<h1 class='title'>{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">{{item.sell_price}}</span>
					<span class="old">{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</div>
		
		<mt-button type='danger' size='large' @click='getMore'>加载更多</mt-button>
		
		
		
	</div>
</template>

<script>
	
	export default{
		data(){
			//data 是往自己组建内部挂载一些私有数据的
			return{
				pageindex:1,
				goodslist:[]
			}
		},
		created(){
			this.getGoodList();
			
		},
		methods:{
			getGoodList(){
				//获取商品列表
				this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result=>{
					if(result.body.status == 0){
//						this.goodslist = result.body.message
						this.goodslist = this.goodslist.concat(result.body.message);
						console.log('this.goodslist',this.goodslist)
					}else{
						console.log('this.goodslist','获取失败')
					}
				})
			},
			getMore(){
				this.pageindex++;
				this.getGoodList();
			},
			goDetail(id){
				//使用js的形式进行路由导航
				//注意：一定要区分this.Z$route 和 this.$router这两个对象
				//其中：this.$route 是路由参数对象，所有路由中的参数，params,query都属于它
				//this.router 是一个路由导航对象，用它，可以方便的使用js代码，进行路由的前进和后退，跳转到新的URL地址
				console.log(this)
				//1.最简单的
//				this.$router.push('/home/goodsinfo/'+ id)
				//2.传递对象
//				this.$router.push({path:'/home/goodsinfo/'+ id});
				//3.传递一个命名路由  router起名
				this.$router.push({name:"goodsinfo",params:{id}})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.goods-list{
	display: flex;
	flex-wrap: wrap;
	padding: 7px;
	justify-content: space-between;
	.goods-item{
		width: 49%;
		margin: 4px 0;
		border:1px solid #ccc;
		box-shadow:0 0 8px #ccc;
		padding:2px;
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		min-height:293px;
		img{
			width: 100%;
		}
		.title{
			font-size: 14px;
		}
		.info {
			background: #eee;
			p{
				margin: 0;
				padding: 5px;
			}
			.price{
					.now{
						color:red;
						font-weight: bold;
						font-size: 16px;
					}
					.old{
						text-decoration:line-through ;
						font-size:12px ;
						margin-left: 10px;
					}
			}
			.sell{
				display: flex;
				justify-content: space-between;
				
			}
			
			
		}
	}
	
}
</style>